<%@ include file="../common/IncludeTop.jsp"%>

<div id="Catalog" >
	<div id="container">
		<form action="signIn" >

			<h3 >Please enter your username and password.</h3>
			<%--		<p>Username:--%>
			<%--			<input type="text" name="username" value=""/>--%>
			<%--			<br />--%>
			<%--			Password:--%>
			<%--			<input type="password" name="password" value=""/>--%>
			<%--		</p>--%>
			<div>
				<input class="input-sign" type="text" name="username" value="" placeholder="Username"/>
				<br>
				<input class="input-sign" type="password" name="password" value="" placeholder="Password"/>
			</div>

			<input class="input-sign" type="text" name="vCode" size="5" maxlength="4" placeholder="VerificationCode:"/>
			<a href="signIn"><img border="0" src="verificationCode" name="checkcode"></a>

			<div id="box" onselectstart="return false;">
				<div class="bgColor"></div>
				<div class="txt" >Slide to Unlock</div>
				<!--给i标签添加上相应字体图标的类名即可-->
				<div class="slider"><i class="iconfont icon-double-right"></i></div>
			</div>
			<br>

			<script src="ajax.js"></script>
			<script>
				//一、定义了一个获取元素的方法
				function getEle(selector){
					return document.querySelector(selector);
				}
				//二、获取到需要用到的DOM元素
				var box = getEle("#box"),//容器
						bgColor = getEle(".bgColor"),//背景色
						txt = getEle(".txt"),//文本
						slider = getEle(".slider"),//滑块
						icon = getEle(".slider>i"),
						successMoveDistance = box.offsetWidth- slider.offsetWidth,//解锁需要滑动的距离
						downX,//用于存放鼠标按下时的位置
						isSuccess = false;//是否解锁成功的标志，默认不成功

				//三、给滑块添加鼠标按下事件
				slider.onmousedown = mousedownHandler;

				//3.1鼠标按下事件的方法实现
				function mousedownHandler(e){
					bgColor.style.transition = "";
					slider.style.transition = "";
					var e = e || window.event || e.which;
					downX = e.clientX;
					//在鼠标按下时，分别给鼠标添加移动和松开事件
					document.onmousemove = mousemoveHandler;
					document.onmouseup = mouseupHandler;
				};

				//四、定义一个获取鼠标当前需要移动多少距离的方法
				function getOffsetX(offset,min,max){
					if(offset < min){
						offset = min;
					}else if(offset > max){
						offset = max;
					}
					return offset;
				}

				//3.1.1鼠标移动事件的方法实现
				function mousemoveHandler(e){
					var e = e || window.event || e.which;
					var moveX = e.clientX;
					var offsetX = getOffsetX(moveX - downX,0,successMoveDistance);
					bgColor.style.width = offsetX + "px";
					slider.style.left = offsetX + "px";

					if(offsetX == successMoveDistance){
						success();
						// myFun();
						//ajaxFun();
						isSuccess2 = "true";
						loadXMLDoc("signIn",isSuccess2,show);
					}
					//如果不设置滑块滑动时会出现问题（目前还不知道为什么）
					e.preventDefault();
				};


				//3.1.2鼠标松开事件的方法实现
				function mouseupHandler(e){
					if(!isSuccess){
						bgColor.style.width = 0 + "px";
						slider.style.left = 0 + "px";
						bgColor.style.transition = "width 0.8s linear";
						slider.style.transition = "left 0.8s linear";
					}
					document.onmousemove = null;
					document.onmouseup = null;
				};

				//五、定义一个滑块解锁成功的方法
				function success(){
					isSuccess = true;
					txt.innerHTML = "Succeed to Unlock!";
					bgColor.style.backgroundColor ="lightgreen";
					slider.className = "slider active";
					icon.className = "iconfont icon-xuanzhong";
					//滑动成功时，移除鼠标按下事件和鼠标移动事件
					slider.onmousedown = null;
					document.onmousemove = null;
					var $sbmBtn = $("#sbmBtn");
					isSuccess ? $sbmBtn.removeAttr("disabled") : $sbmBtn.attr("disabled", "disabled");

				};

				// function myFun() {
				// 	var value = document.getElementById("isSuccess");
				// 	document.location.href="signIn?isSuccess="+value;
				// }

				function show(){

					if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						document.getElementById("show").innerHTML = xmlhttp.responseText;
					}
				}
			</script>

			<input type="submit" id="sbmBtn"  disabled="disabled" name="signon" value="Login" class="form-control"/>
			<%--				<input type="submit" id="sbmBtn"  disabled="disabled" name="signon" value="Login" class="btn solid"/>--%>
			<script language="JavaScript" type="text/javascript">
				// 快捷键响应
				// targetObj: 目标对象，如果满足快捷键条件，触发目标对象的click事件
				// ctrlKey: 是否按住了Ctrl组合键
				// shiftKey: 是否按住了Shift组合键
				// altKey: 是否按住了Alt组合键
				// keycode: 按键对应的数值
				function Hotkey(event, targetObj, ctrlKey,shiftKey, altKey, keycode){
					if (
							targetObj
							&& event.keyCode == keycode
					)
						targetObj.click();
				}

				function fnKeyup(event)
				{
					var b = document.getElementById("sbmBtn");
					Hotkey(event, b, false, false, false, 13);
				}

				// 捕获系统的Keyup事件
				// 如果是Mozilla系列浏览器
				if (document.addEventListener)
					document.addEventListener("keyup",fnKeyup,true);
				else
					document.attachEvent("onkeyup",fnKeyup);

				//-->
			</script>
		</form>
		<h3>Need a user name and password?</h3>
		<%--	<stripes:link--%>
		<%--	beanclass="org.mybatis.jpetstore.web.actions.AccountActionBean"--%>
		<%--	event="newAccountForm">Register Now!--%>
		<%--	</stripes:link>--%>
		<a href="newAccountForm">Register Now!</a>
	</div>
</div>

<%@ include file="../common/IncludeBottom.jsp"%>

